<template>
  <div class="groups">
    <el-row>
      <el-col :span="24">
        <el-input placeholder="请输入群组名称" v-model="groupName" style="width: 320px;">
          <el-button type="primary" slot="append" @click="handleSearch">搜索</el-button>
        </el-input>
        <span class="select-name">群组类别：</span>
        <el-select v-model="groupType" placeholder="请选择" @change="groupTypeChange">
          <el-option label="全部" value="0"></el-option>
          <el-option label="静态群组" value="1"></el-option>
          <el-option label="动态群组" value="2"></el-option>
        </el-select>
        <span class="select-name">来源：</span>
        <el-select v-model="groupSource" placeholder="请选择" @change="groupSourceChange">
          <el-option label="全部" value="0"></el-option>
          <el-option label="自己创建" value="1"></el-option>
          <el-option label="分公司创建" value="2"></el-option>
          <el-option label="分部创建" value="3"></el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="right operation">
          <el-button type="danger" @click="removeGroupsList()" :disable="false">批量删除</el-button>
          <el-button type="primary" v-show="hasNewGroupAuthority" @click="editGroup('add')">新建群组</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
          stripe
          ref="multipleTable"
          :loading="tableLoading"
          :data="tableData"
          @selection-change="selectionChange"
          style="width: 100%">
          <el-table-column type="selection" width="50" align="center"></el-table-column>
          <el-table-column prop="groupClusterName" label="群组名称" align="center"></el-table-column>
          <el-table-column prop="userNumber" label="成员数量" align="center"></el-table-column>
          <el-table-column prop="createTime" label="建群时间" align="center" width="200"
                           :formatter="getCreateTime"></el-table-column>
          <el-table-column prop="groupClusterType" label="群组类别" align="center" :formatter="getGroupType"></el-table-column>
          <el-table-column prop="groupClusterSource" label="来源" align="center"></el-table-column>
          <el-table-column prop="groupClusterCreatePerson" label="创建人" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="editGroup(scope.row.id)">编辑</el-button>
              <el-button type="text" @click="removeGroupsList(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            :current-page.sync="paging.page"
            :page-size.sync="paging.size"
            layout="sizes, total, prev, pager, next, jumper"
            :total.sync="paging.total"
            :page-sizes="[10, 30, 50, 100]"
            @current-change="pagingCurrentChange"
            @size-change="pagingSizeChange">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {
    getGroupsList,
    removeGroupsList
  } from '@/service/getData'

  export default {
    data() {
      return {
        groupName: '',
        groupType: '0',
        groupSource: '0',
        tableData: [],
        tableLoading: false,
        paging: {
          page: 1,
          size: 10,
          total: 0
        },
        selectedRows: [],
      }
    },
    computed: {
      hasNewGroupAuthority() {
        return true
      },
      searchCondition() {
        return {
          groupClusterName: this.groupName,
          groupClusterType: this.groupType,
          groupClusterSource: this.groupSource,
          page: this.paging.page,
          size: this.paging.size
        }
      }
    },
    beforeRouteEnter(to, from, next) {
      const isFromEditGroup = from.name === 'GmEditGroup'
      next((vm) => {
        if(isFromEditGroup) {
          const search = sessionStorage.getItem('gmGroupsListSearchConditions') || {}
          const conditions = JSON.parse(search)
          vm.groupName = conditions.groupClusterName
          vm.groupType = conditions.groupClusterType
          vm.groupSource = conditions.groupClusterSource
          vm.paging.page = conditions.page
          vm.paging.size = conditions.size
          vm.getGroupsList().then(() => {
            vm.paging.page = conditions.page
            vm.paging.size = conditions.size
            sessionStorage.removeItem('gmGroupsListSearchConditions')
          })
        }
        vm.getGroupsList()
      })
    },
    created() {
      // this.getGroupsList()
    },
    methods: {
      // 获取群组列表
      async getGroupsList() {
        try {
          const res = await getGroupsList(this.searchCondition)
          const data = res.data.data || {}
          this.tableData = data.list || []
          this.paging.total = (data.page || {}).total
          return res
        } catch (err) {

        }
      },

      // 删除群组列表
      removeGroupsList(id) {
        const ids = id ? [id] : this.selectedRows.map(item => item.id)
        if(!ids.length) {
          this.$message.warning('请选择需要移除的成员！')
          return false
        }
        const tips = ids.length > 1 ? '确定删除选中的所有群组？' : '确定删除该群组？'
        this.$confirm(tips, '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeGroupsList(ids).then(res => {
            this.$message.success(res.data.data)
          }).catch(() => {
            this.$message.error('删除失败，请稍后再试！')
          }).finally(() => {
            this.$refs.multipleTable.clearSelection();
            this.getGroupsList()
          })
        })
      },

      // 选中行
      selectionChange(value) {
        this.selectedRows = value
      },

      handleSearch() {
        this.paging.page = 1
        this.getGroupsList()
      },

      groupTypeChange() {
        this.paging.page = 1
        this.getGroupsList()
      },

      groupSourceChange() {
        this.paging.page = 1
        this.getGroupsList()
      },

      // 新建群组
      newGroup() {

      },

      // 保存搜索条件
      saveSearchConditions() {
        const conditions = JSON.stringify(this.searchCondition)
        sessionStorage.setItem('gmGroupsListSearchConditions', conditions)
      },

      // 编辑群组
      editGroup(id) {
        this.saveSearchConditions()
        this.$router.push({
          name: 'GmEditGroup',
          params: {id}
        })
      },

      // 创建时间
      getCreateTime(row, column, cellValue, rowIndex) {
        return this.dateFormat(cellValue)
      },

      // 群组类别
      getGroupType(row, column, cellValue, rowIndex) {
        const types = ['全部', '静态群组', '动态群组']
        return types[cellValue]
      },

      // 群组来源
      getGroupSource(row, column, cellValue, rowIndex) {
        const types = ['全部', '自己创建', '分公司创建', '分部创建']
        return types[cellValue]
      },

      // confirm
      confirm(tips = '此操作将永久删除该文件', title = '') {
        this.$confirm(tips, title, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

        }).catch(() => {

        })
      },

      // 分页当前页改变
      pagingCurrentChange(value) {
        this.paging.page = value
        this.getGroupsList()
      },

      // 分页容量改变
      pagingSizeChange(value) {
        this.paging.page = 1
        this.paging.size = value
        this.getGroupsList()
      },

      // 日期格式化
      dateFormat(date) {
        return this.$date.format(new Date(date), 'YYYY-MM-DD HH:mm:ss')
      },

    }
  }
</script>

<style lang="scss" scoped>

  .right {
    float: right;
  }

  .select-name {
    margin-left: 30px;
  }

  .operation {
    padding: 20px 0 10px;
  }

</style>
